/*
  1. 打开页面
    + 请求到所有的分类数据
    + 把级联菜单渲染好

  2. 打开页面
    + 按照默认选中的某一个商品
    + 获取到它的分类参数信息
    + 渲染到下面的表格内

  3. 级联菜单切换内容
    + 级联菜单切换什么内容
    + 跟随变化什么内容
    + 思路:
      => 当级联菜单选中的项改变的时候
      => 从新执行 getParamsInfo 方法就可以了
    + 双向数据绑定了一个 cateChecked 数组
      => 只要级联选择器的内容改变
      => cateChecked 数组就会改变
    + 只要 cateChecked 数组变了
      => 就从新请求
      => watch 监控 cateChecked 数组
*/

export default {
  name: 'Params',
  data () {
    return {
      activeName: 'first',
      inputVisible: false,
      inputValue: '',
      // 分类列表, 渲染级联菜单
      cateList: [],
      // 默认选中的分类的 id
      cateChecked: [1, 3, 6],
      // 动态参数数组
      manyParamsList: []
    }
  },
  created () {
    // 请求级联菜单需要的数据
    this.getCateList()
    // 请求默认的一个分类参数
    this.getParamsInfo()
  },
  methods: {
    // 请求所有分类列表
    async getCateList () {
      const { data } = await this.$get('categories', { params: { type: 3 } })
      // 赋值操作
      this.cateList = data
    },
    // 获取动态参数
    async getParamsInfo () {
      // 根据当前选择的 曲面电视
      // 获取 曲面电视相关的参数
      const { data } = await this.$get(`categories/${this.cateChecked[2]}/attributes`, { params: { sel: 'many' } })
      this.manyParamsList = data
    },
    // 获取静态参数
    async getOnlyParamsInfo () {
      console.log('获取静态参数')
    }
  },
  watch: {
    cateChecked: {
      handler () {
        // 只要代码执行了, 表示级联菜单从新选择了
        this.getParamsInfo()
        this.getOnlyParamsInfo()
      },
      deep: true
    }
  }
}
